﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Background image repeat-x</title>
	<style>
	/* Remove the comment around the following rule for short pages. 
		It makes your page at least as tall as the height of the 
		browser window. Consequently, the page background starts in the 
		bottom, left corner of the window, not higher up where your content ends.
	*/

	/*
	html {
		min-height: 100%;
	}
	*/

	body {
		background: url(img/sky.png) repeat-x left bottom;
		/* The shorthand above is the same as writing these individually:
			background-image: url(sky.png);
			background-repeat: repeat-x;
			background-position: left bottom;
		*/
		
		color: #fff;
		font: 1.1em sans-serif;
		padding: 1.5em 1.5em 1em;
	}

	p {
		font-size: 1.125em;
	}

	/* For introductory note. */
	.note {
		color: #000;
		font-size: .9375em;
		margin: -.5em 0 3em;
	}
	</style>
</head>
<body>
<p class="note">[<b>Note:</b> Make your browser smaller to replicate the effect shown in Fig J on page 253. You can resize the browser by dragging the lower-right corner.]</p>

<h1>Background repeats horizontally</h1>

<p>White background color fills in space above image.</p>

</body> 
</html>